<template>
  <h2>用户信息修改</h2>
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="用户名">
      <el-input v-model="form.userName" />
    </el-form-item>
  
    <el-form-item label="性别:">
      <el-radio-group v-model="form.userSex">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="所在地址">
     <el-select v-model="form.provinceId"
      style="width: 160px;float:left;margin: 5px;" @change="GetAllUrban(),GetAlCounty()" >
      <el-option label="请选择省份" value=' ' />
        <el-option v-for="item in Provinced" :key="item.provinceId"
        :label="item.provinceName" :value="item.provinceId" />
      </el-select>
      <el-select v-model="form.urbanId"
      style="width: 160px;float: left;margin: 5px;" @change="GetAlCounty()">
      <el-option label="请选择市" value=' ' />
      <el-option v-for="item in Urban" :key="item.urbanId" :label="item.urbanName" :value="item.urbanId" />
      </el-select>
      <el-select v-model="form.countyId" style="width: 160px;float: left;" >
        <el-option label="请选择县" value=' ' />
        <el-option v-for="item in County" :key="item.countyId" 
        :label="item.countyName" :value="item.countyId" />
      </el-select>
    </el-form-item>

    <el-form-item label="详情地址:">
      <el-input v-model="form.userAddress" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">修改</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router';

const form = reactive({
  userId:'',
  userName: '',
  userSex: '',
  provinceId: ' ',
  urbanId: ' ',
  countyId: ' ',
  userAddress: '',
})
onMounted(()=>{
  GetAllProvince()
  GetFan()
})
//省份
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Provinced:any=ref([])
const GetAllProvince=()=>{
  axios.get('User/GetAllProvince', {
  }).then((ret) => {
    console.log(ret.data)
    Provinced.value=ret.data.data
  })
}
//市
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Urban:any=ref([])
const GetAllUrban=()=>{
  form.urbanId=' '
  axios.get('User/GetAllUrban', {
    params:{
      id:form.provinceId
    }
  }).then((ret) => {
    console.log(ret.data)
    Urban.value=ret.data.data
  })
}
//县
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const County:any=ref([])
const GetAlCounty=()=>{
  form.countyId=' '
  axios.get('User/GetAlCounty', {
    params:{
      id:form.urbanId
    }
  }).then((ret) => {
    console.log(ret.data)
    County.value=ret.data
  })
}
const route=useRoute()
//反填
const GetFan=()=>{
  axios.get('User/Backfill', {
    params: {
      userId:route.query.userId
    }
  }).then((ret) => {
    console.log(ret.data.data)
    const bb=ret.data.data
    form.userName=bb.userName
    form.userSex=bb.userSex
    form.provinceId=bb.provinceId
    GetAllUrban()
    form.urbanId=bb.urbanId
    GetAlCounty()
    form.countyId=bb.countyId
    form.userAddress=bb.userAddress
    form.userId=bb.userId
  })
}
import { ElMessage } from 'element-plus'
import router from '@/router';
//修改
const onSubmit = () => {
  axios.post(`User/Update`,form).then((ret) => {
    console.log(ret.data)
    if(ret.data.code==1){
      ElMessage.success('修改成功')
      router.push('/UserInfoList')
      return
    }else{
      ElMessage.error(ret.data.message)
    }
  })
}

</script>

<style scoped>

</style>